<template>
  <div>
    <Tips />
    <div style="margin-bottom:100px">
      <van-checkbox-group v-model="result" :disabled="isEditing">
        <van-checkbox
          @click="changeChecked(item)"
          :name="item.id"
          v-for="item in cartList"
          :key="item.id"
          v-model="item.checked"
        >
        <!-- v-model="item.checked" -->
          <van-swipe-cell>
            <van-card
              :num="item.number"
              :price="item.retail_price"
              :title="item.goods_name"
              :thumb="item.list_pic_url"
            ></van-card>
            <van-stepper
              @change="stepperChange(item)"
              v-model="item.number"
              v-show="isEditing"
            />
            <template #right>
              <van-button
                @click="delGood(item.product_id)"
                square
                type="danger"
                text="删除"
              />
            </template>
          </van-swipe-cell>
        </van-checkbox>
      </van-checkbox-group>
    </div>
    <div>
      <van-submit-bar
        :price="cartTotal.checkedGoodsAmount * 100"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox v-model="isChecked">全选</van-checkbox>
        <template #tip>
        累计共<span>{{ cartTotal.checkedGoodsCount }}</span
        >件商品,可点击
        <van-button
          @click="editBtn"
          :type="isEditing ? 'danger' : 'primary'"
          size="small"
        >
          {{ isEditing ? "完成编辑" : "编辑" }}
        </van-button>
        按钮进行商品数量修理
      </template>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import Tips from "@/components/Tips";
import Vue from "vue";
import { Checkbox, CheckboxGroup } from "vant";
import { Card } from "vant";
import { SwipeCell } from "vant";
import { Button } from "vant";
Vue.use(Button);
Vue.use(SwipeCell);

Vue.use(Card);

Vue.use(Checkbox);
Vue.use(CheckboxGroup);
import {
  GetCartListData,
  ChangeGoodChecked,
  StepperChangeData,
  DeleteGood,
} from "../../src/api/index";
export default {
  data() {
    return {
      // 展示选中的商品的数组
      // 哪一个商品的checked的值为1,就可以把它的id添加到这个数组
      result: [],
      // 购物车列表数据
      cartList: [],
      // 商品总信息
      cartTotal: {},
      isEditing: true,
    };
  },
  mounted() {
    this.getCartListData();
    this.$bus.$emit("changeFlag", 3);
  },
  methods: {
    editBtn() {
      this.isEditing = !this.isEditing;
    },
    //获取购物车数据
    async getCartListData() {
      this.result = []
      let result = await GetCartListData();
      // console.log(result)
      if (result.errno != 0) {
        alert("获取购物车信息失败");
        return;
      }
      this.cartList = result.data.cartList;
      this.cartTotal = result.data.cartTotal;
      // 清空之前保存的数据
      this.result = []
      // 更新数据
      this.cartList.forEach((item) => {
       if(item.checked == 1)  this.result.push(item.id) 
      });
    },
    // 提交按钮的回调函数
    onSubmit() {
      // 没有接口
    },
    //点击切换某一个的选中状态
    async changeChecked(item) {
      let isChecked = item.checked == 0 ? 1 : 0;
      let productIds = item.product_id;
      let result = await ChangeGoodChecked({ isChecked, productIds });
      // console.log(result)
      if (result.errno != 0) {
        alert("修改失败");
        return;
      }
      // console.log(result)
      //更新数据
      // 搜集购物车信息
      this.cartList = result.data.cartList;
      this.result = []
      // 将勾选的商品添加到result数组中
      this.cartList.forEach((item)=>{
        if(item.checked == 1)  this.result.push(item.id) 
      })
      // 搜集购物车总价数量相关信息
      this.cartTotal = result.data.cartTotal;
    },
    // 商品更新操作？
    async stepperChange(item) {
      console.log(item.goods_id,item.id,item.number,item.product_id,)
      const result = await StepperChangeData({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id,
      })
      if(result.errno == 0){
        this.getCartListData()
      }else{
        console.log(result.errmsg)
      }
    },
    // 删除商品
    async delGood(pid) {
      const pId = pid.toString()
      console.log(pId)
     const result = await DeleteGood(pId)
     if(result.errno == 0){
       this.cartList = result.data.cartList
       this.cartTotal = result.data.cartTotal
     }else{
       console.log(result.errmsg)
     }
    }
  },
  components: {
    Tips,
  },
  computed: {
    isChecked: {
      // 全选全不选按钮的计算属性
      get() {
        return this.cartList.every(item => item.checked === 1)
      },
     set(val){
        let isChecked = val?1:0
        this.cartList.forEach(async (item)=>{
            let result = await ChangeGoodChecked({isChecked,productIds:item.product_id.toString()})
            if(result.errno == 0){
              // 修改成功刷新页面
               this.getCartListData()
            } 
        })
       
      }
    },
  },
};
</script>
 
<style lang="less" scoped>
.van-button--square {
  height: 100%;
}
.van-stepper {
  text-align: right;
}
.van-checkbox__label {
  flex: 1;
}
.van-checkbox-group {
  background-color: #fff;
  padding-bottom: 1.5rem;
  .van-checkbox {
    border-bottom: 1px solid #ccc;
    padding: 0.1rem 0.15rem;
  }
  .van-card {
    width: 9rem;
    // padding:0 1.4267rem;
  }
}
.van-submit-bar {
  bottom: 50px;
  border-bottom: 1px solid #ccc;
}
</style>